<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基层AI辅助诊断系统 - 个人药品管理</title>
    <!-- 引入Element Plus的样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <!-- 引入Vue 3 -->
    <script src="https://unpkg.com/vue@3"></script>
    <!-- 引入Element Plus组件库 -->
    <script src="https://unpkg.com/element-plus"></script>
    <!-- 引入中文语言包 -->
    <script src="https://unpkg.com/element-plus/dist/locale/zh-cn.min.js"></script>
    <style>
        /* 基础样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden; /* 防止页面滚动 */
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
            background: #FFFFFF;
            color: var(--text-primary);
            font-size: 14px;
            line-height: 1.5;
        }

        /* 色彩系统 - 基于HIS系统现代极简风设计规范 */
        :root {
            /* 主色调 */
            --primary: #0F6CBD;
            --primary-light: #D0E7FF;
            --primary-dark: #0A4F8D;

            /* 辅助色 */
            --success: #0F8A5F;
            --warning: #F59337;
            --error: #D13438;
            --info: #0078D4;

            /* 中性色 - 文字 */
            --text-primary: #1A1A1A;
            --text-secondary: #4D4D4D;
            --text-tertiary: #767676;
            --text-disabled: #A6A6A6;

            /* 中性色 - 边框与分割线 */
            --border-strong: #CCCCCC;
            --border-normal: #E0E0E0;
            --border-light: #F0F0F0;
            --divider: #F5F5F5;

            /* 中性色 - 背景 */
            --bg-primary: #FFFFFF;
            --bg-secondary: #F9F9F9;
            --bg-card: #FFFFFF;
            --bg-disabled: #F5F5F5;

            /* 医疗专业色 */
            --medical-critical: #B91C1C;
            --medical-abnormal: #F59E0B;
            --medical-normal: #10B981;
            --medical-pending: #3B82F6;
            --medical-completed: #9CA3AF;

            /* 间距系统 */
            --spacing-2: 2px;
            --spacing-4: 4px;
            --spacing-8: 8px;
            --spacing-12: 12px;
            --spacing-16: 16px;
            --spacing-24: 24px;
            --spacing-32: 32px;
            --spacing-40: 40px;
            --spacing-48: 48px;

            /* 字体大小 */
            --font-page-title: 20px;
            --font-card-title: 16px;
            --font-table-title: 14px;
            --font-body: 14px;
            --font-table: 13px;
            --font-small: 12px;

            /* 行高 */
            --line-height-title: 1.4;
            --line-height-body: 1.5;
            --line-height-table: 1.2;
            --line-height-form: 1.4;

            /* 圆角 */
            --radius-small: 2px;
            --radius-medium: 4px;

            /* 动画时间 */
            --transition-fast: 150ms;
            --transition-normal: 200ms;
            --transition-slow: 300ms;

            /* 导航统一宽度 */
            --nav-item-width: 140px;
        }

        [v-cloak] {
            display: none;
        }

        /* 布局容器 */
        .container {
            width: 100%;
            height: 100vh; /* 使用固定高度而不是最小高度 */
            display: flex;
            flex-direction: column;
            background-color: var(--bg-secondary);
            overflow: hidden; /* 防止整体页面滚动 */
        }

        /* 顶部导航栏 */
        .header {
            height: 60px;
            background-color: var(--bg-primary);
            border-bottom: 1px solid var(--border-normal);
            display: flex;
            align-items: center;
            padding: 0 var(--spacing-24);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
            position: relative;
            z-index: 100;
        }

        .header-spacer {
            width: 200px;
            flex-shrink: 0;
        }

        #app-nav {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            z-index: 10;
            width: calc(100% - 400px);
            display: flex;
            justify-content: center;
        }

        /* Element Plus菜单样式覆盖 */
        .el-menu {
            border: none !important;
            background-color: transparent !important;
        }

        .el-menu--horizontal > .el-menu-item,
        .el-menu--horizontal > .el-sub-menu .el-sub-menu__title {
            height: 60px;
            line-height: 60px;
            color: var(--text-secondary);
            font-weight: 500;
            font-size: var(--font-body);
            padding: 0;
            width: var(--nav-item-width);
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }

        .el-sub-menu__icon-arrow { display: none !important; }

        .el-menu--horizontal > .el-sub-menu .el-sub-menu__title::after {
            content: '';
            display: inline-block;
            width: 16px;
            height: 16px;
            margin-left: 8px;
            background-repeat: no-repeat;
            background-position: center;
            background-size: 16px 16px;
            background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23767676' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
        }

        .el-sub-menu:hover > .el-sub-menu__title::after,
        .el-sub-menu.is-active > .el-sub-menu__title::after {
            background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230F6CBD' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
        }

        .el-sub-menu.is-opened > .el-sub-menu__title::after {
            background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230F6CBD' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 15 12 9 18 15'/></svg>");
        }

        .el-menu--horizontal > .el-menu-item.is-active,
        .el-menu--horizontal > .el-sub-menu.is-active .el-sub-menu__title {
            color: var(--primary) !important;
            border-bottom: 2px solid var(--primary);
            font-weight: 500;
        }

        .el-menu--horizontal > .el-menu-item:not(.is-disabled):hover,
        .el-menu--horizontal > .el-menu-item:not(.is-disabled):focus,
        .el-menu--horizontal > .el-sub-menu:not(.is-disabled):hover .el-sub-menu__title {
            color: var(--primary);
            background-color: transparent;
        }

        /* 下拉菜单样式覆盖 */
        .el-menu--popup {
            width: var(--nav-item-width) !important;
            min-width: var(--nav-item-width) !important;
            max-width: var(--nav-item-width) !important;
            border-radius: var(--radius-small);
            padding: 4px 0;
            border: 1px solid var(--border-light);
            border-top: 2px solid var(--primary);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            text-align: center !important;
        }

        .el-menu--popup .el-menu-item {
            height: 36px;
            line-height: 36px;
            padding: 0 !important;
            color: var(--text-secondary);
            white-space: nowrap;
            text-align: center;
            width: var(--nav-item-width) !important;
            box-sizing: border-box;
            overflow: hidden;
            text-overflow: ellipsis;
            display: flex !important;
            justify-content: center !important;
            align-items: center !important;
            font-size: var(--font-body);
        }

        .el-menu--popup .el-menu-item:hover {
            background-color: var(--bg-secondary);
            color: var(--primary);
        }

        .user-section {
            display: flex;
            align-items: center;
            gap: var(--spacing-16);
            margin-left: auto;
            z-index: 10;
            width: 200px;
            justify-content: flex-end;
            flex-shrink: 0;
            cursor: pointer;
            padding: 8px 12px;
            border-radius: var(--radius-small);
            transition: background-color var(--transition-fast);
            color: var(--text-secondary);
        }

        .user-section:hover {
            background-color: var(--bg-secondary);
        }

        .user-avatar {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background-color: var(--primary-light);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--primary);
            font-weight: 500;
        }

        .user-name {
            font-weight: 500;
            font-size: var(--font-body);
            color: var(--text-secondary);
        }

        .user-arrow {
            color: var(--text-tertiary);
            transition: color var(--transition-normal);
        }

        .user-section:hover .user-arrow {
            color: var(--primary);
        }

        /* 用户下拉弹窗 */
        .user-dropdown {
            position: absolute;
            top: 60px;
            right: var(--spacing-24);
            width: 160px;
            background: var(--bg-primary);
            border: 1px solid var(--border-light);
            border-radius: var(--radius-small);
            box-shadow: 0 4px 12px rgba(0,0,0,0.08);
            display: none;
            z-index: 200;
            overflow: hidden;
        }

        .user-dropdown .item {
            padding: 10px 12px;
            color: var(--text-secondary);
            font-size: var(--font-body);
            cursor: pointer;
            white-space: nowrap;
        }

        .user-dropdown .item:hover {
            background-color: var(--bg-secondary);
            color: var(--primary);
        }

        /* 主要内容区域样式 */
        .main-content {
            display: flex;
            flex-direction: column;
            flex: 1;
            height: calc(100vh - 60px); /* 固定高度，减去顶部导航栏高度 */
            background-color: var(--bg-primary);
            width: 100%;
            overflow: hidden; /* 防止内容溢出 */
        }

        /* 药品管理标题栏样式 */
        .combined-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: var(--spacing-24);
            border-bottom: 1px solid var(--border-light);
            background-color: var(--bg-primary);
        }

        .page-title {
            font-size: var(--font-page-title);
            font-weight: 600;
            color: var(--text-primary);
            line-height: var(--line-height-title);
            margin-right: var(--spacing-24);
            white-space: nowrap;
        }

        .header-actions {
            display: flex;
            align-items: center;
            gap: var(--spacing-16);
        }

        /* 搜索框样式 */
        .search-box {
            position: relative;
            width: 200px;
            height: 32px;
        }

        .search-icon {
            position: absolute;
            left: 8px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--text-tertiary);
            pointer-events: none;
        }

        .search-box input {
            width: 100%;
            height: 100%;
            padding: var(--spacing-8) var(--spacing-8) var(--spacing-8) 32px;
            border: 1px solid var(--border-normal);
            border-radius: var(--radius-small);
            font-size: var(--font-body);
            color: var(--text-primary);
            transition: border-color 0.2s, box-shadow 0.2s;
        }

        .search-box input:focus {
            border-color: var(--primary);
            outline: none;
            box-shadow: 0 0 0 2px rgba(15, 108, 189, 0.2);
        }

        .search-box input::placeholder {
            color: var(--text-tertiary);
        }

        /* 下拉选择器样式 */
        .filter-select {
            height: 32px;
            border: 1px solid var(--border-normal);
            border-radius: var(--radius-small);
            padding: 0 var(--spacing-8);
            font-size: var(--font-body);
            color: var(--text-secondary);
            background-color: var(--bg-primary);
            cursor: pointer;
            transition: border-color 0.2s, box-shadow 0.2s;
        }

        .filter-select:focus {
            border-color: var(--primary);
            outline: none;
            box-shadow: 0 0 0 2px rgba(15, 108, 189, 0.2);
        }

        /* 按钮样式 */
        .btn {
            padding: var(--spacing-8) var(--spacing-16);
            border-radius: var(--radius-small);
            font-size: var(--font-body);
            font-weight: 500;
            cursor: pointer;
            border: none;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: all var(--transition-normal);
            gap: var(--spacing-8);
            height: 36px;
            line-height: 1;
            white-space: nowrap;
        }

        .btn-primary {
            background-color: var(--primary);
            color: white;
        }

        .btn-primary:hover {
            background-color: var(--primary-dark);
        }

        .btn-primary:active {
            background-color: var(--primary-dark);
            transform: translateY(1px);
        }

        .btn-default {
            background-color: var(--bg-secondary);
            color: var(--text-secondary);
            border: 1px solid var(--border-normal);
        }

        .btn-default:hover {
            background-color: var(--bg-primary);
            border-color: var(--border-strong);
            color: var(--text-primary);
        }

        .btn-default:active {
            background-color: var(--bg-secondary);
            transform: translateY(1px);
        }

        /* 主要内容布局 */
        .content-layout {
            display: flex;
            flex: 1;
            overflow: hidden; /* 防止内容溢出 */
            height: 100%; /* 确保占满父容器高度 */
        }

        /* 左侧药品分类树区域 */
        .category-panel {
            width: 280px;
            background-color: var(--bg-primary);
            border-right: 1px solid var(--border-light);
            display: flex;
            flex-direction: column;
            flex-shrink: 0;
            height: 100%; /* 确保面板占满整个高度 */
            overflow: hidden; /* 防止内容溢出 */
        }

        .panel-header {
            padding: var(--spacing-16);
            border-bottom: 1px solid var(--border-light);
        }

        .panel-header .btn {
            padding: var(--spacing-8) var(--spacing-12);
            width: 100%;
        }

        .category-search-box {
            position: relative;
            width: 100%;
            height: 32px;
            margin-bottom: var(--spacing-8);
        }

        .category-search-box input {
            width: 100%;
            height: 100%;
            padding: var(--spacing-8) var(--spacing-8) var(--spacing-8) 32px;
            border: 1px solid var(--border-normal);
            border-radius: var(--radius-small);
            font-size: var(--font-body);
            color: var(--text-primary);
            transition: border-color 0.2s, box-shadow 0.2s;
        }

        .category-search-box input:focus {
            border-color: var(--primary);
            outline: none;
            box-shadow: 0 0 0 2px rgba(15, 108, 189, 0.2);
        }

        .category-search-box input::placeholder {
            color: var(--text-tertiary);
        }

        .category-list {
            flex: 1;
            overflow-y: auto;
            padding: var(--spacing-12);
            max-height: calc(100vh - 180px); /* 限制最大高度，减去顶部导航和搜索框的高度 */
            scrollbar-width: thin; /* Firefox */
            scrollbar-color: var(--border-normal) transparent; /* Firefox */
        }

        .category-list::-webkit-scrollbar {
            width: 6px;
        }

        .category-list::-webkit-scrollbar-track {
            background: transparent;
        }

        .category-list::-webkit-scrollbar-thumb {
            background-color: var(--border-normal);
            border-radius: 3px;
        }

        .category-list::-webkit-scrollbar-thumb:hover {
            background-color: var(--border-strong);
        }

        .category-item {
            padding: var(--spacing-8) var(--spacing-12);
            cursor: pointer;
            transition: background-color var(--transition-fast);
            display: flex;
            align-items: center;
            border-radius: var(--radius-small);
            margin: var(--spacing-4) 0;
        }

        .category-item:hover {
            background-color: var(--bg-secondary);
        }

        .category-item.active {
            background-color: var(--primary-light);
            color: var(--primary);
            font-weight: 500;
        }

        .category-tree-node {
            padding-left: var(--spacing-16);
        }

        .category-arrow {
            display: inline-block;
            width: 16px;
            height: 16px;
            margin-right: var(--spacing-4);
            cursor: pointer;
            color: var(--text-tertiary);
            transition: color var(--transition-normal);
            background-repeat: no-repeat;
            background-position: center;
            background-size: 16px 16px;
            background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23767676' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
        }

        .category-arrow:hover {
            color: var(--primary);
            background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230F6CBD' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
        }

        .category-item:hover .category-arrow {
            color: var(--primary);
            background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230F6CBD' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
        }

        .category-spacer {
            display: inline-block;
            width: 16px;
            height: 16px;
            margin-right: var(--spacing-4);
        }

        /* 右侧药品列表区域 */
        .drug-panel {
            flex: 1;
            background-color: var(--bg-primary);
            display: flex;
            flex-direction: column;
            overflow: hidden; /* 改为hidden，防止双重滚动条 */
            height: 100%; /* 确保面板占满整个高度 */
        }

        .drug-list {
            flex: 1;
            padding: var(--spacing-24);
            overflow: auto;
        }

        /* 表格样式 */
        .drug-table {
            width: 100%;
            border-collapse: collapse;
        }

        .drug-table th {
            background-color: var(--bg-secondary);
            padding: var(--spacing-12) var(--spacing-16);
            text-align: left;
            font-weight: 600;
            color: var(--text-secondary);
            border-bottom: 1px solid var(--border-normal);
            height: 40px;
            font-size: var(--font-table-title);
            position: relative;
        }

        .drug-table td {
            padding: var(--spacing-12) var(--spacing-16);
            border-bottom: 1px solid var(--border-light);
            color: var(--text-secondary);
            height: 40px;
            vertical-align: middle;
            font-size: var(--font-table);
        }

        .drug-table tr:hover {
            background-color: var(--bg-secondary);
        }

        .drug-table tr:last-child td {
            border-bottom: none;
        }

        /* 单价编辑样式 */
        .price-cell {
            position: relative;
        }

        .price-input {
            width: 100%;
            height: 100%;
            border: 1px solid var(--primary);
            border-radius: var(--radius-small);
            padding: 0 var(--spacing-8);
            font-size: var(--font-table);
            text-align: center;
        }

        .price-display {
            cursor: pointer;
            padding: var(--spacing-4) var(--spacing-8);
            border-radius: var(--radius-small);
            transition: background-color var(--transition-fast);
        }

        .price-display:hover {
            background-color: var(--bg-secondary);
        }

        /* 操作链接样式 */
        .operations {
            display: inline-flex;
            gap: var(--spacing-8);
        }

        .operation-link {
            color: var(--primary);
            text-decoration: none;
            cursor: pointer;
        }

        .operation-link:hover {
            color: var(--primary-dark);
        }

        .delete-drug {
            color: var(--error);
        }

        .delete-drug:hover {
            color: #B91C1C;
        }

        /* 分页控件样式 */
        .pagination-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: var(--spacing-16);
            border-top: 1px solid var(--border-light);
        }

        .pagination-text {
            color: var(--text-tertiary);
            font-size: var(--font-small);
        }

        .pagination-controls {
            display: flex;
            align-items: center;
            gap: var(--spacing-16);
        }

        .page-numbers {
            display: flex;
            gap: var(--spacing-8);
        }

        .page-numbers button {
            min-width: 32px;
            height: 32px;
            border-radius: var(--radius-small);
            border: 1px solid var(--border-normal);
            background: var(--bg-primary);
            cursor: pointer;
            color: var(--text-secondary);
            transition: all var(--transition-normal);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: var(--font-small);
        }

        .page-numbers button:hover {
            border-color: var(--primary);
            color: var(--primary);
        }

        .page-numbers button.active {
            background: var(--primary);
            border-color: var(--primary);
            color: #FFFFFF;
        }

        .pagination-size {
            display: flex;
            align-items: center;
            gap: var(--spacing-8);
            color: var(--text-secondary);
            font-size: var(--font-small);
        }

        .page-size-selector {
            height: 32px;
            border: 1px solid var(--border-normal);
            border-radius: var(--radius-small);
            padding: 0 var(--spacing-8);
            font-size: var(--font-small);
            margin: 0 var(--spacing-4);
        }

        /* 响应式样式 */
        @media (max-width: 768px) {
            .header {
                flex-wrap: wrap;
                padding: var(--spacing-12) var(--spacing-16);
                height: auto;
            }

            .header-spacer {
                width: 100%;
                justify-content: center;
                margin-bottom: 8px;
            }

            .user-section {
                width: 100%;
                justify-content: center;
                order: 3;
                margin-top: 8px;
            }

            #app-nav {
                position: relative;
                left: 0;
                transform: none;
                width: 100%;
                order: 3;
                margin-top: var(--spacing-8);
            }

            .el-menu--horizontal {
                flex-wrap: wrap;
                width: 100%;
                overflow-x: auto;
                white-space: nowrap;
                -webkit-overflow-scrolling: touch;
                padding-bottom: var(--spacing-4);
                justify-content: center;
            }

            .el-menu--horizontal > .el-menu-item,
            .el-menu--horizontal > .el-sub-menu .el-sub-menu__title {
                height: 48px;
                line-height: 48px;
            }

            .combined-header {
                padding: var(--spacing-16);
                flex-direction: column;
                gap: var(--spacing-16);
                align-items: stretch;
            }

            .header-actions {
                flex-wrap: wrap;
                gap: var(--spacing-8);
            }

            .search-box {
                flex: 1;
                min-width: 200px;
            }

            .content-layout {
                flex-direction: column;
            }

            .category-panel {
                width: 100%;
                border-right: none;
                border-bottom: 1px solid var(--border-light);
            }

            .drug-table {
                min-width: 600px;
            }

            .drug-list {
                padding: var(--spacing-16);
            }

            .pagination-container {
                flex-direction: column;
                gap: var(--spacing-16);
                align-items: flex-start;
            }

            .pagination-controls {
                flex-direction: column;
                align-items: flex-start;
                gap: var(--spacing-12);
                width: 100%;
            }

            .page-numbers {
                flex-wrap: wrap;
            }
        }

        /* 弹窗样式 */
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1000;
            opacity: 0;
            visibility: hidden;
            transition: opacity var(--transition-normal) ease-out;
            backdrop-filter: blur(2px);
        }

        .modal-overlay.show {
            opacity: 1;
            visibility: visible;
        }

        .modal {
            background-color: var(--bg-primary);
            border-radius: 0; /* 全屏模式不需要圆角 */
            box-shadow: none; /* 全屏模式不需要阴影 */
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            transform: scale(0.98);
            transition: transform var(--transition-normal) ease-out;
        }

        .modal-overlay.show .modal {
            transform: scale(1);
        }

        .modal-header {
            padding: var(--spacing-16) var(--spacing-24);
            border-bottom: 1px solid var(--border-light);
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 48px;
            background-color: var(--bg-primary);
        }

        .modal-title {
            font-size: var(--font-card-title);
            font-weight: 600;
            color: var(--text-primary);
            line-height: var(--line-height-title);
        }

        .modal-close {
            cursor: pointer;
            color: var(--text-tertiary);
            font-size: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 32px;
            height: 32px;
            border-radius: var(--radius-small);
            transition: background-color var(--transition-fast), color var(--transition-fast);
        }

        .modal-close:hover {
            color: var(--text-primary);
            background-color: var(--bg-secondary);
        }

        .modal-body {
            flex: 1;
            padding: var(--spacing-24);
            overflow-y: auto;
        }
        
        /* 确保弹窗内容区域正确显示 */
        .modal .add-drug-body {
            flex: 1;
            display: flex;
            overflow: hidden;
        }

        .modal-footer {
            padding: var(--spacing-16) var(--spacing-24);
            border-top: 1px solid var(--border-light);
            display: flex;
            justify-content: flex-end;
            gap: var(--spacing-16);
            background-color: var(--bg-primary);
        }

        /* 药品详情弹窗样式 */
        /* 药品详情弹窗 - 全屏模式 */
        .drug-detail-modal {
            width: 100vw; /* 使用视口宽度 */
            height: 100vh; /* 使用视口高度 */
            max-width: 100vw;
            max-height: 100vh;
            position: fixed; /* 确保固定位置 */
            top: 0;
            left: 0;
            margin: 0; /* 移除任何可能的边距 */
            border-radius: 0; /* 确保没有圆角 */
            box-shadow: none; /* 移除阴影 */
        }

        .drug-detail-section {
            margin-bottom: var(--spacing-24);
            border: 1px solid var(--border-light);
            border-radius: var(--radius-small);
            overflow: hidden;
        }

        .drug-detail-section-header {
            padding: var(--spacing-12) var(--spacing-16);
            background-color: var(--bg-secondary);
            border-bottom: 1px solid var(--border-light);
        }

        .drug-detail-section-title {
            font-size: var(--font-card-title);
            font-weight: 600;
            color: var(--text-primary);
            margin: 0;
        }

        .drug-detail-section-content {
            padding: var(--spacing-16);
            background-color: var(--bg-primary);
        }

        .drug-detail-row {
            display: flex;
            margin-bottom: var(--spacing-16);
        }

        .drug-detail-row:last-child {
            margin-bottom: 0;
        }

        .drug-detail-field {
            flex: 1;
            display: flex;
            flex-direction: column;
        }

        .drug-detail-field:not(:last-child) {
            margin-right: var(--spacing-24);
        }

        .drug-detail-label {
            font-size: var(--font-body);
            font-weight: 500;
            color: var(--text-secondary);
            margin-bottom: var(--spacing-8);
        }

        .drug-detail-value {
            font-size: var(--font-body);
            color: var(--text-primary);
            line-height: var(--line-height-body);
        }

        .drug-detail-section-content .drug-detail-field .drug-detail-label {
            font-size: var(--font-body);
            font-weight: 500;
            color: var(--text-secondary);
            margin-bottom: var(--spacing-8);
        }

        .drug-detail-section-content .drug-detail-field .drug-detail-value {
            font-size: var(--font-body);
            color: var(--text-primary);
            line-height: var(--line-height-body);
        }

        .drug-detail-indications,
        .drug-detail-contraindications {
            white-space: pre-line;
            line-height: var(--line-height-body);
        }

        /* 药品图片区域样式 */
        .drug-images {
            display: flex;
            gap: var(--spacing-16);
            flex-wrap: wrap;
        }

        .drug-image-item {
            width: 120px;
            height: 120px;
            border: 1px solid var(--border-normal);
            border-radius: var(--radius-small);
            overflow: hidden;
            cursor: pointer;
            transition: transform var(--transition-fast);
        }

        .drug-image-item:hover {
            transform: scale(1.05);
        }

        .drug-image-placeholder {
            width: 100%;
            height: 100%;
            background-color: var(--bg-secondary);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--text-tertiary);
            font-size: var(--font-small);
        }

        .drug-image-placeholder img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .drug-image-tip {
            margin-top: var(--spacing-8);
            color: var(--text-tertiary);
            font-size: var(--font-small);
            text-align: center;
        }

        /* 添加药品弹窗样式 */
        /* 全屏模式弹窗 */
        .add-drug-modal {
            width: 100vw; /* 使用视口宽度 */
            height: 100vh; /* 使用视口高度 */
            max-width: 100vw;
            max-height: 100vh;
            position: fixed; /* 确保固定位置 */
            top: 0;
            left: 0;
            margin: 0; /* 移除任何可能的边距 */
            border-radius: 0; /* 确保没有圆角 */
            box-shadow: none; /* 移除阴影 */
        }
        
        /* 顶部关闭按钮区域 */
        .modal-close-area {
            display: flex;
            justify-content: flex-end;
            padding: var(--spacing-16) var(--spacing-24);
            background-color: var(--bg-primary);
            border-bottom: 1px solid var(--border-normal);
            height: 60px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
        }
        
        /* 添加药品标题栏 - 与14-药品管理.html完全一致 */
        .add-drug-header {
            padding: var(--spacing-24);
            border-bottom: 1px solid var(--border-light);
            background-color: var(--bg-primary);
            margin: 0;
            display: flex;
            align-items: center;
            justify-content: space-between;
            box-sizing: border-box;
        }
        
        .add-drug-header .page-title {
            font-size: var(--font-page-title);
            font-weight: 600;
            color: var(--text-primary);
            line-height: var(--line-height-title);
            margin: 0;
            white-space: nowrap;
        }
        
        .add-drug-header-actions {
            display: flex;
            align-items: center;
            gap: var(--spacing-16);
        }

        .add-drug-body {
            display: flex;
            height: calc(100% - 60px - 73px - 64px); /* 减去顶部关闭区域(60px)、标题栏和底部高度 */
            overflow: hidden; /* 防止内容溢出 */
        }

        /* 左侧药品分类区域 - 与14-药品管理.html完全一致 */
        .add-drug-left {
            width: 280px;
            background-color: var(--bg-primary);
            border-right: 1px solid var(--border-light);
            display: flex;
            flex-direction: column;
            flex-shrink: 0;
            height: 100%; /* 确保面板占满整个高度 */
            overflow: hidden; /* 防止内容溢出 */
        }

        .add-drug-left-header {
            padding: var(--spacing-16);
            border-bottom: 1px solid var(--border-light);
            background-color: var(--bg-primary);
        }

        .add-drug-search {
            position: relative;
            width: 100%;
        }

        .add-drug-search input {
            width: 100%;
            height: 32px;
            padding: var(--spacing-8) var(--spacing-8) var(--spacing-8) 32px;
            border: 1px solid var(--border-normal);
            border-radius: var(--radius-small);
            font-size: var(--font-body);
            color: var(--text-primary);
            transition: border-color var(--transition-normal), box-shadow var(--transition-normal);
        }

        .add-drug-search input:focus {
            border-color: var(--primary);
            outline: none;
            box-shadow: 0 0 0 2px rgba(15, 108, 189, 0.2);
        }

        .add-drug-search input::placeholder {
            color: var(--text-tertiary);
        }

        .add-drug-search-icon {
            position: absolute;
            left: 8px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--text-tertiary);
            pointer-events: none;
        }

        .add-drug-category-tree {
            flex: 1;
            overflow-y: auto;
            padding: var(--spacing-12);
            background-color: var(--bg-primary);
            scrollbar-width: thin; /* Firefox */
            scrollbar-color: var(--border-normal) transparent; /* Firefox */
        }

        .add-drug-category-tree::-webkit-scrollbar {
            width: 6px;
        }

        .add-drug-category-tree::-webkit-scrollbar-track {
            background: transparent;
        }

        .add-drug-category-tree::-webkit-scrollbar-thumb {
            background-color: var(--border-normal);
            border-radius: 3px;
        }

        .add-drug-category-tree::-webkit-scrollbar-thumb:hover {
            background-color: var(--border-strong);
        }

        /* 右侧药品列表区域 - 与14-药品管理.html完全一致 */
        .add-drug-right {
            flex: 1;
            background-color: var(--bg-primary);
            display: flex;
            flex-direction: column;
            overflow: hidden; /* 防止内容溢出 */
            height: 100%; /* 确保面板占满整个高度 */
        }
        
        /* 药品列表容器 */
        .add-drug-list-container {
            flex: 1;
            display: flex;
            flex-direction: column;
            padding: var(--spacing-24);
            overflow: hidden; /* 防止内容溢出 */
        }

        .add-drug-list-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: var(--spacing-16);
        }

        .add-drug-selected-count {
            font-size: var(--font-body);
            color: var(--text-secondary);
            font-weight: 500;
        }

        /* 药品表格容器 */
        .add-drug-table-container {
            flex: 1;
            overflow: auto;
            border: 1px solid var(--border-light);
            border-radius: var(--radius-small);
            background-color: var(--bg-primary);
            scrollbar-width: thin; /* Firefox */
            scrollbar-color: var(--border-normal) transparent; /* Firefox */
            padding-bottom: 120px; /* 为底部分页与操作区预留空间 */
        }

        .add-drug-table-container::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }

        .add-drug-table-container::-webkit-scrollbar-track {
            background: transparent;
        }

        .add-drug-table-container::-webkit-scrollbar-thumb {
            background-color: var(--border-normal);
            border-radius: 3px;
        }

        .add-drug-table-container::-webkit-scrollbar-thumb:hover {
            background-color: var(--border-strong);
        }

        /* 药品表格 */
        .add-drug-table {
            width: 100%;
            border-collapse: collapse;
            min-width: 1200px; /* 确保表格有足够宽度显示所有列 */
        }

        .add-drug-table th {
            background-color: var(--bg-secondary);
            padding: var(--spacing-12) var(--spacing-16);
            text-align: left;
            font-weight: 600;
            color: var(--text-secondary);
            border-bottom: 1px solid var(--border-normal);
            font-size: var(--font-table-title);
            position: sticky;
            top: 0;
            z-index: 10;
            white-space: nowrap;
        }

        .add-drug-table td {
            padding: var(--spacing-12) var(--spacing-16);
            border-bottom: 1px solid var(--border-light);
            color: var(--text-secondary);
            font-size: var(--font-table);
            vertical-align: middle;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 200px; /* 限制单元格最大宽度 */
        }

        .add-drug-table tr:hover {
            background-color: var(--bg-secondary);
        }

        /* 复选框样式 */
        .add-drug-checkbox {
            width: 16px;
            height: 16px;
            cursor: pointer;
            accent-color: var(--primary);
        }

        /* 确保选择列不会太窄 */
        .checkbox-column {
            width: 60px;
            min-width: 60px;
            text-align: center;
        }

        /* 分页控件 */
        .add-drug-pagination {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: var(--spacing-16);
            border-top: 1px solid var(--border-light);
            background-color: var(--bg-primary);
            position: sticky;
            bottom: 0;
            z-index: 5;
        }

        .add-drug-pagination-text {
            font-size: var(--font-small);
            color: var(--text-tertiary);
        }

        .add-drug-pagination-controls {
            display: flex;
            align-items: center;
            gap: var(--spacing-16);
        }

        .add-drug-pagination-numbers {
            display: flex;
            gap: var(--spacing-8);
        }

        .add-drug-pagination-numbers button {
            min-width: 32px;
            height: 32px;
            border: 1px solid var(--border-normal);
            background: var(--bg-primary);
            color: var(--text-secondary);
            border-radius: var(--radius-small);
            cursor: pointer;
            font-size: var(--font-small);
            transition: all var(--transition-normal);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .add-drug-pagination-numbers button:hover {
            border-color: var(--primary);
            color: var(--primary);
        }

        .add-drug-pagination-numbers button.active {
            background: var(--primary);
            border-color: var(--primary);
            color: #FFFFFF;
        }

        /* 每页显示数量选择器 */
        .add-drug-pagination-size {
            display: flex;
            align-items: center;
            gap: var(--spacing-8);
            color: var(--text-secondary);
            font-size: var(--font-small);
        }

        .add-drug-page-size-selector {
            height: 32px;
            border: 1px solid var(--border-normal);
            border-radius: var(--radius-small);
            padding: 0 var(--spacing-8);
            font-size: var(--font-small);
            margin: 0 var(--spacing-4);
            appearance: none;
            background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23767676' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
            background-repeat: no-repeat;
            background-position: right 8px center;
            padding-right: 24px;
            min-width: 60px;
        }

        /* 仅右侧区域的底部操作栏（不延伸到左侧栏） */
        .add-drug-actions {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            gap: var(--spacing-16);
            padding: var(--spacing-16) var(--spacing-24);
            border-top: 1px solid var(--border-light);
            background-color: var(--bg-primary);
        }

        /* 表头提示图标样式（用于"单价"列） */
        .th-tip {
            display: inline-flex;
            width: 16px;
            height: 16px;
            margin-left: 6px;
            vertical-align: middle;
            background-repeat: no-repeat;
            background-position: center;
            background-size: 16px 16px;
            cursor: help;
            filter: none;
            background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23767676' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='M9.09 9a3 3 0 1 1 5.82 1c0 2-3 2-3 4'/><line x1='12' y1='17' x2='12' y2='17'/></svg>");
            position: relative;
        }

        .th-tip:hover {
            background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230F6CBD' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='M9.09 9a3 3 0 1 1 5.82 1c0 2-3 2-3 4'/><line x1='12' y1='17' x2='12' y2='17'/></svg>");
        }

        .th-tip::after {
            content: attr(data-tip);
            position: absolute;
            bottom: 140%;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(0,0,0,0.85);
            color: #fff;
            padding: 6px 8px;
            border-radius: 4px;
            font-size: var(--font-small);
            line-height: 1.2;
            white-space: nowrap;
            opacity: 0;
            pointer-events: none;
            transition: opacity var(--transition-normal);
            z-index: 20;
        }

        .th-tip::before {
            content: '';
            position: absolute;
            bottom: 128%;
            left: 50%;
            transform: translateX(-50%);
            width: 0; height: 0;
            border-left: 6px solid transparent;
            border-right: 6px solid transparent;
            border-top: 6px solid rgba(0,0,0,0.85);
            opacity: 0;
            transition: opacity var(--transition-normal);
            z-index: 20;
        }

        .th-tip:hover::after,
        .th-tip:hover::before {
            opacity: 1;
        }

        /* 详情弹窗网格布局，严格对齐线框与规范 */
        .detail-grid-5 {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: var(--spacing-16) var(--spacing-24);
        }

        .detail-grid-6 {
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            gap: var(--spacing-16) var(--spacing-24);
        }

        .detail-grid-2 {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: var(--spacing-16) var(--spacing-24);
        }

        /* 字体与层级统一 */
        .drug-detail-field .drug-detail-label {
            font-size: var(--font-small);
            color: var(--text-tertiary);
            margin-bottom: var(--spacing-8);
        }

        .drug-detail-field .drug-detail-value {
            font-size: var(--font-body);
            color: var(--text-primary);
            line-height: var(--line-height-body);
        }

        /* 适应症与禁忌症卡片化展示，增强可读性 */
        .detail-card {
            border: 1px solid var(--border-light);
            border-radius: var(--radius-small);
            background: var(--bg-primary);
            padding: var(--spacing-12);
            min-height: 80px;
            white-space: pre-line;
            color: var(--text-primary);
            line-height: var(--line-height-body);
        }
    </style>
</head>
<body>
    <div id="app" class="container">
        <!-- 顶部导航栏 - 使用Element Plus组件 -->
        <header class="header">
            <div class="header-spacer"></div>
            <div id="app-nav">
                <el-menu
                    :default-active="activeIndex"
                    class="el-menu-demo"
                    mode="horizontal"
                    @select="handleSelect"
                    :ellipsis="false"
                    :popper-offset="0"
                    popper-class="custom-dropdown">
                    <el-menu-item index="1">开始问诊</el-menu-item>
                    <el-sub-menu index="2" popper-class="custom-dropdown">
                        <template #title>病历管理</template>
                        <el-menu-item index="2-1">病历查询</el-menu-item>
                        <el-menu-item index="2-2">病历模板</el-menu-item>
                        <el-menu-item index="2-3">个人药品</el-menu-item>
                    </el-sub-menu>
                    <el-menu-item index="3">患者管理</el-menu-item>
                    <el-sub-menu index="4" popper-class="custom-dropdown">
                        <template #title>数据统计</template>
                        <el-menu-item index="4-1">诊断统计</el-menu-item>
                        <el-menu-item index="4-2">宏观统计</el-menu-item>
                    </el-sub-menu>
                    <el-menu-item index="5">医学知识</el-menu-item>
                    <el-sub-menu index="6" popper-class="custom-dropdown">
                        <template #title>基础数据</template>
                        <el-menu-item index="6-1">药品管理</el-menu-item>
                    </el-sub-menu>
                    <el-sub-menu index="7" popper-class="custom-dropdown">
                        <template #title>消息通知</template>
                        <el-menu-item index="7-1">通知查看</el-menu-item>
                        <el-menu-item index="7-2">通知发布</el-menu-item>
                    </el-sub-menu>
                    <el-sub-menu index="8" popper-class="custom-dropdown">
                        <template #title>用户管理</template>
                        <el-menu-item index="8-1">用户管理</el-menu-item>
                        <el-menu-item index="8-2">角色管理</el-menu-item>
                    </el-sub-menu>
                </el-menu>
            </div>
            <div class="user-section" id="userSection">
                <span class="user-name">张医生</span>
                <svg class="user-arrow" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <polyline points="6 9 12 15 18 9"></polyline>
                </svg>
            </div>
            <div class="user-dropdown" id="userDropdown">
                <div class="item">个人中心</div>
                <div class="item">退出登录</div>
            </div>
        </header>

        <!-- 主要内容区域 -->
        <div class="main-content">
            <!-- 个人药品管理标题栏 -->
            <section class="combined-header">
                <h1 class="page-title">个人药品管理</h1>
                <div class="header-actions">
                    <div class="search-box">
                        <svg class="search-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <circle cx="11" cy="11" r="8"></circle>
                            <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
                        </svg>
                        <input type="text" id="drugSearchInput" placeholder="搜索药品...">
                    </div>
                    <select class="filter-select" id="basicDrugFilter">
                        <option value="all">基本药物: 全部</option>
                        <option value="yes">是</option>
                        <option value="no">否</option>
                    </select>
                    <select class="filter-select" id="formFilter">
                        <option value="all">剂型: 全部</option>
                        <option value="tablet">片剂</option>
                        <option value="capsule">胶囊</option>
                        <option value="injection">注射剂</option>
                        <option value="liquid">液体剂</option>
                        <option value="granule">颗粒剂</option>
                        <option value="powder">散剂</option>
                    </select>
                    <button class="btn btn-primary" id="queryBtn">查询</button>
                    <button class="btn btn-default" id="resetBtn">重置</button>
                    <button class="btn btn-primary" id="addDrugBtn">添加药品</button>
                </div>
            </section>

            <!-- 内容布局 -->
            <div class="content-layout">
                <!-- 左侧药品分类树区域 -->
                <div class="category-panel">
                    <div class="panel-header">
                        <div class="category-search-box">
                            <svg class="search-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <circle cx="11" cy="11" r="8"></circle>
                                <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
                            </svg>
                            <input type="text" id="categorySearchInput" placeholder="搜索分类...">
                        </div>
                    </div>
                    <div id="categoryList" class="category-list">
                        <!-- 分类树将在JavaScript中动态生成 -->
                    </div>
                </div>

                <!-- 右侧药品列表区域 -->
                <div class="drug-panel">
                    <div class="drug-list">
                        <table class="drug-table">
                            <thead>
                                <tr>
                                    <th>药品名称</th>
                                    <th>药品编码</th>
                                    <th>规格</th>
                                    <th>剂型</th>
                                    <th>单位</th>
                                    <th>基本药物</th>
                                    <th>常用用法</th>
                                    <th>常用用量</th>
                                    <th>常用频次</th>
                                    <th>适应症</th>
                                    <th>禁忌症</th>
                                    <th>单价<span class="th-tip" data-tip="双击此列单元格可编辑药品单价"></span></th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody id="drugTableBody">
                                <!-- 药品数据将在JavaScript中动态生成 -->
                            </tbody>
                        </table>
                    </div>

                    <!-- 分页控件 -->
                    <div class="pagination-container">
                        <div class="pagination-text">共 <span id="totalDrugs">0</span> 条记录</div>
                        <div class="pagination-controls">
                            <div id="pageNumbers" class="page-numbers">
                                <!-- 页码按钮将在JavaScript中动态生成 -->
                            </div>
                            <div class="pagination-size">
                                每页显示
                                <select id="pageSizeSelector" class="page-size-selector">
                                    <option value="10" selected>10</option>
                                    <option value="20">20</option>
                                    <option value="50">50</option>
                                </select>
                                条
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 添加药品弹窗 (全屏模式) -->
    <div id="addDrugModal" class="modal-overlay" style="display: none;">
        <div class="modal add-drug-modal">
            <!-- 顶部关闭按钮区域 -->
            <div class="modal-close-area">
                <span class="modal-close" id="closeAddDrugModal">×</span>
            </div>
            
            <!-- 标题栏 - 搜索和筛选区域 -->
            <div class="combined-header add-drug-header">
                <h1 class="page-title">添加药品</h1>
                <div class="header-actions add-drug-header-actions">
                    <div class="search-box">
                        <svg class="search-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <circle cx="11" cy="11" r="8"></circle>
                            <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
                        </svg>
                        <input type="text" id="addDrugSystemSearch" placeholder="搜索药品...">
                    </div>
                    <select class="filter-select" id="addDrugBasicFilter">
                        <option value="all">基本药物: 全部</option>
                        <option value="yes">是</option>
                        <option value="no">否</option>
                    </select>
                    <select class="filter-select" id="addDrugFormFilter">
                        <option value="all">剂型: 全部</option>
                        <option value="tablet">片剂</option>
                        <option value="capsule">胶囊</option>
                        <option value="injection">注射剂</option>
                        <option value="liquid">液体剂</option>
                        <option value="granule">颗粒剂</option>
                        <option value="powder">散剂</option>
                    </select>
                    <button class="btn btn-primary" id="addDrugQueryBtn">查询</button>
                    <button class="btn btn-default" id="addDrugResetBtn">重置</button>
                </div>
            </div>
            
            <div class="add-drug-body">
                <!-- 左侧药品分类区域 -->
                <div class="add-drug-left">
                    <!-- 分类搜索框 -->
                    <div class="add-drug-left-header">
                        <div class="add-drug-search">
                            <svg class="add-drug-search-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <circle cx="11" cy="11" r="8"></circle>
                                <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
                            </svg>
                            <input type="text" id="addDrugCategorySearch" placeholder="搜索分类...">
                        </div>
                    </div>
                    <!-- 分类树 -->
                    <div id="addDrugCategoryTree" class="add-drug-category-tree">
                        <!-- 分类树将在JavaScript中动态生成 -->
                    </div>
                </div>

                <!-- 右侧药品列表区域 -->
                <div class="add-drug-right">
                    <!-- 药品列表容器 -->
                    <div class="add-drug-list-container">
                        <!-- 已选择计数 -->
                        <div class="add-drug-list-header">
                            <div class="add-drug-selected-count">已选择: <span id="selectedCount">0</span> 项</div>
                        </div>

                        <!-- 药品表格 -->
                        <div class="add-drug-table-container">
                            <table class="add-drug-table">
                                <thead>
                                    <tr>
                                        <th class="checkbox-column">选择</th>
                                        <th>药品名称</th>
                                        <th>药品编码</th>
                                        <th>规格</th>
                                        <th>剂型</th>
                                        <th>单位</th>
                                        <th>基本药物</th>
                                        <th>常用用法</th>
                                        <th>常用用量</th>
                                        <th>常用频次</th>
                                        <th>适应症</th>
                                        <th>禁忌症</th>
                                    </tr>
                                </thead>
                                <tbody id="addDrugTableBody">
                                    <!-- 药品列表将在JavaScript中动态生成 -->
                                </tbody>
                            </table>
                        </div>

                        <!-- 分页控件 -->
                        <div class="add-drug-pagination">
                            <div class="add-drug-pagination-text">共 <span id="addDrugTotal">0</span> 条记录</div>
                            <div class="add-drug-pagination-controls">
                                <div id="addDrugPageNumbers" class="add-drug-pagination-numbers">
                                    <!-- 页码按钮将在JavaScript中动态生成 -->
                                </div>
                                <div class="add-drug-pagination-size">
                                    每页显示
                                    <select id="addDrugPageSizeSelector" class="add-drug-page-size-selector">
                                        <option value="10" selected>10</option>
                                        <option value="20">20</option>
                                        <option value="50">50</option>
                                    </select>
                                    条
                                </div>
                            </div>
                        </div>
                        <!-- 仅右侧区域的底部操作栏 -->
                        <div class="add-drug-actions">
                            <button class="btn btn-default" id="cancelAddDrugBtn">取消</button>
                            <button class="btn btn-primary" id="confirmAddDrugBtn" disabled>确认添加</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 药品详情弹窗 -->
    <div id="drugDetailModal" class="modal-overlay" style="display: none;">
        <div class="modal drug-detail-modal">
            <div class="modal-header">
                <h3 class="modal-title">药品详情</h3>
                <span class="modal-close" id="closeDrugDetailModal">×</span>
            </div>
            <div class="modal-body" id="drugDetailBody">
                <!-- 药品详情内容将在JavaScript中动态生成 -->
            </div>
        </div>
    </div>

    <!-- JavaScript 交互逻辑 -->
    <script>
        // 创建Vue应用
        document.addEventListener('DOMContentLoaded', function() {
            // 安全初始化导航（CDN失败时不影响页面主体逻辑）
            try {
                if (window.Vue && window.Vue.createApp) {
                    const { createApp, ref } = window.Vue;
                    const navApp = createApp({
                        setup() {
                            const activeIndex = ref('2-3'); // 默认选中"个人药品"
                            const handleSelect = (key, keyPath) => {
                                console.log(key, keyPath);
                            };
                            return { activeIndex, handleSelect };
                        }
                    });
                    if (window.ElementPlus) {
                        if (window.ElementPlusLocaleZhCn) {
                            navApp.use(window.ElementPlus, { locale: window.ElementPlusLocaleZhCn });
                        } else {
                            navApp.use(window.ElementPlus);
                        }
                    }
                    navApp.mount('#app-nav');
                }
            } catch (e) {
                console.warn('导航初始化失败，不影响主体渲染', e);
            }

            

            // 用户下拉菜单交互
            const userSection = document.getElementById('userSection');
            const userDropdown = document.getElementById('userDropdown');

            if (userSection && userDropdown) {
                userSection.addEventListener('click', function(e) {
                    e.stopPropagation();
                    const isOpen = userDropdown.style.display === 'block';
                    userDropdown.style.display = isOpen ? 'none' : 'block';
                });

                document.addEventListener('click', function() {
                    userDropdown.style.display = 'none';
                });
            }

            // 药品分类树数据（预设分类）
            const categoryTree = [
                {
                    id: 3,
                    name: '抗感染药物',
                    children: [
                        { id: 31, name: '抗生素类', children: [
                            { id: 311, name: '青霉素类' },
                            { id: 312, name: '头孢菌素类' },
                            { id: 313, name: '大环内酯类' }
                        ]},
                        { id: 32, name: '抗病毒药' },
                        { id: 33, name: '抗真菌药' }
                    ]
                },
                {
                    id: 4,
                    name: '解热镇痛药',
                    children: []
                },
                {
                    id: 5,
                    name: '心脑血管药物',
                    children: []
                },
                {
                    id: 6,
                    name: '消化系统药物',
                    children: []
                },
                {
                    id: 7,
                    name: '呼吸系统药物',
                    children: []
                },
                {
                    id: 8,
                    name: '内分泌系统药物',
                    children: []
                },
                {
                    id: 9,
                    name: '神经系统药物',
                    children: []
                },
                {
                    id: 10,
                    name: '血液系统药物',
                    children: []
                },
                {
                    id: 11,
                    name: '维生素及营养药',
                    children: []
                },
                {
                    id: 12,
                    name: '中药',
                    children: [
                        { id: 121, name: '中成药' },
                        { id: 122, name: '中药饮片' }
                    ]
                }
            ];

            // 药品数据
            let drugs = [
                {
                    id: 1,
                    name: '阿莫西林',
                    code: 'AM001',
                    spec: '0.25g/片',
                    form: '片剂',
                    unit: '片',
                    isBasic: true,
                    usage: '口服',
                    dosage: '0.25g/次',
                    frequency: '3次/日',
                    indications: '呼吸道感染',
                    contraindications: '过敏史',
                    price: '5.20',
                    categoryId: 311
                },
                {
                    id: 2,
                    name: '头孢克洛',
                    code: 'TB002',
                    spec: '0.25g/片',
                    form: '片剂',
                    unit: '片',
                    isBasic: true,
                    usage: '口服',
                    dosage: '0.25g/次',
                    frequency: '2次/日',
                    indications: '细菌感染',
                    contraindications: '肾功能不全',
                    price: '8.50',
                    categoryId: 312
                },
                {
                    id: 3,
                    name: '布洛芬',
                    code: 'BL003',
                    spec: '0.2g/片',
                    form: '片剂',
                    unit: '片',
                    isBasic: true,
                    usage: '口服',
                    dosage: '0.2g/次',
                    frequency: '3次/日',
                    indications: '发热镇痛',
                    contraindications: '胃溃疡',
                    price: '3.80',
                    categoryId: 4
                },
                {
                    id: 4,
                    name: '阿司匹林',
                    code: 'AS004',
                    spec: '25mg/片',
                    form: '片剂',
                    unit: '片',
                    isBasic: true,
                    usage: '口服',
                    dosage: '25mg/次',
                    frequency: '1次/日',
                    indications: '抗血栓',
                    contraindications: '出血倾向',
                    price: '2.10',
                    categoryId: 5
                },
                {
                    id: 5,
                    name: '板蓝根',
                    code: 'BL005',
                    spec: '10g/袋',
                    form: '颗粒剂',
                    unit: '袋',
                    isBasic: true,
                    usage: '冲服',
                    dosage: '10g/次',
                    frequency: '3次/日',
                    indications: '感冒发热',
                    contraindications: '孕妇慎用',
                    price: '12.00',
                    categoryId: 122
                }
            ];

            // 系统药品库数据（模拟更多药品）
            const systemDrugs = [
                {
                    id: 101,
                    name: '阿司匹林肠溶片',
                    code: 'ASP001',
                    spec: '100mg/片',
                    form: '片剂',
                    unit: '片',
                    isBasic: true,
                    status: 'normal',
                    usage: '口服',
                    dosage: '100mg/次',
                    frequency: '1次/日',
                    indications: '抗血小板聚集',
                    contraindications: '出血倾向',
                    categoryId: 5
                },
                {
                    id: 102,
                    name: '硝苯地平缓释片',
                    code: 'NIF002',
                    spec: '30mg/片',
                    form: '片剂',
                    unit: '片',
                    isBasic: true,
                    status: 'normal',
                    usage: '口服',
                    dosage: '30mg/次',
                    frequency: '1次/日',
                    indications: '高血压',
                    contraindications: '心源性休克',
                    categoryId: 5
                },
                {
                    id: 103,
                    name: '奥美拉唑肠溶胶囊',
                    code: 'OME003',
                    spec: '20mg/粒',
                    form: '胶囊',
                    unit: '粒',
                    isBasic: true,
                    status: 'normal',
                    usage: '口服',
                    dosage: '20mg/次',
                    frequency: '1次/日',
                    indications: '胃溃疡',
                    contraindications: '肝功能不全',
                    categoryId: 6
                },
                {
                    id: 104,
                    name: '盐酸氨溴索口服液',
                    code: 'AMB004',
                    spec: '30mg/10ml',
                    form: '液体剂',
                    unit: 'ml',
                    isBasic: true,
                    status: 'normal',
                    usage: '口服',
                    dosage: '10ml/次',
                    frequency: '3次/日',
                    indications: '咳嗽痰多',
                    contraindications: '孕妇慎用',
                    categoryId: 7
                },
                {
                    id: 105,
                    name: '复方甘草片',
                    code: 'GLY005',
                    spec: '0.3g/片',
                    form: '片剂',
                    unit: '片',
                    isBasic: true,
                    status: 'normal',
                    usage: '口服',
                    dosage: '2片/次',
                    frequency: '3次/日',
                    indications: '咳嗽',
                    contraindications: '糖尿病',
                    categoryId: 7
                },
                {
                    id: 106,
                    name: '二甲双胍片',
                    code: 'MET006',
                    spec: '0.5g/片',
                    form: '片剂',
                    unit: '片',
                    isBasic: true,
                    status: 'normal',
                    usage: '口服',
                    dosage: '0.5g/次',
                    frequency: '3次/日',
                    indications: '2型糖尿病',
                    contraindications: '肾功能不全',
                    categoryId: 8
                },
                {
                    id: 107,
                    name: '胰岛素注射液',
                    code: 'INS007',
                    spec: '100IU/10ml',
                    form: '注射剂',
                    unit: 'ml',
                    isBasic: true,
                    status: 'normal',
                    usage: '注射',
                    dosage: '根据血糖调整',
                    frequency: '每日监测',
                    indications: '糖尿病',
                    contraindications: '低血糖',
                    categoryId: 8
                },
                {
                    id: 108,
                    name: '维生素C片',
                    code: 'VIT008',
                    spec: '100mg/片',
                    form: '片剂',
                    unit: '片',
                    isBasic: false,
                    status: 'normal',
                    usage: '口服',
                    dosage: '200mg/次',
                    frequency: '3次/日',
                    indications: '维生素C缺乏',
                    contraindications: '无特殊禁忌',
                    categoryId: 11
                }
            ];

            // 当前选中的分类ID
            let currentCategoryId = null;

            // 分页信息
            let currentPage = 1;
            let pageSize = 10;
            let totalPages = 0;

            // 初始化分类树
            function initCategoryTree() {
                const categoryList = document.getElementById('categoryList');
                categoryList.innerHTML = '';

                function renderCategory(category, level = 0) {
                    const item = document.createElement('div');
                    item.className = `category-item${currentCategoryId === category.id ? ' active' : ''}`;
                    item.dataset.id = category.id;
                    item.dataset.level = level;

                    const indent = '&nbsp;'.repeat(level * 4);
                    const hasChildren = category.children && category.children.length > 0;

                    // 只有有子项的分类才显示箭头
                    const arrow = hasChildren ?
                        '<span class="category-arrow" data-expanded="true"></span>' : '<span class="category-spacer"></span>';

                    item.innerHTML = `
                        ${indent}${arrow}
                        <span>${category.name}</span>
                    `;

                    // 点击事件 - 区分箭头点击和分类项点击
                    item.addEventListener('click', function(e) {
                        // 检查点击是否在箭头上
                        const isArrowClick = e.target.classList.contains('category-arrow') ||
                                            (e.target.parentElement && e.target.parentElement.querySelector('.category-arrow') === e.target);

                        if (isArrowClick && hasChildren) {
                            // 点击箭头，展开/收起子分类
                            toggleCategory(category.id);
                            e.stopPropagation(); // 阻止事件冒泡
                        } else {
                            // 点击分类项，选择分类
                            document.querySelectorAll('.category-item').forEach(i => i.classList.remove('active'));
                            this.classList.add('active');
                            currentCategoryId = category.id;
                            filterDrugs();
                            renderDrugTable();
                        }
                    });

                    categoryList.appendChild(item);

                    // 递归渲染子分类（默认展开）
                    if (category.children && category.children.length > 0) {
                        category.children.forEach(child => {
                            const childItem = renderCategory(child, level + 1);
                            childItem.dataset.parentId = category.id; // 记录父级ID，便于展开/收起
                        });
                    }

                    return item;
                }

                // 切换分类展开/收起状态
                function toggleCategory(categoryId) {
                    const items = document.querySelectorAll('.category-item');
                    const parentItem = Array.from(items).find(item => parseInt(item.dataset.id) === categoryId);

                    if (!parentItem) return;

                    const arrow = parentItem.querySelector('.category-arrow');
                    if (!arrow) return;

                    const isCurrentlyExpanded = arrow.getAttribute('data-expanded') === 'true';
                    const newExpandedState = !isCurrentlyExpanded;

                    // 更新箭头方向
                    updateArrowDirection(parentItem, newExpandedState);

                    // 查找直接子分类
                    const childItems = Array.from(items).filter(item =>
                        item.dataset.parentId && parseInt(item.dataset.parentId) === categoryId
                    );

                    // 切换直接子分类的显示状态
                    childItems.forEach(item => {
                        item.style.display = newExpandedState ? 'flex' : 'none';

                        // 如果收起父级，则递归收起所有子级
                        if (!newExpandedState) {
                            const childArrow = item.querySelector('.category-arrow');
                            if (childArrow && childArrow.getAttribute('data-expanded') === 'true') {
                                // 递归收起子分类
                                toggleCategory(parseInt(item.dataset.id));
                            }
                        }
                    });
                }

                // 更新箭头方向
                function updateArrowDirection(item, isExpanded) {
                    const arrow = item.querySelector('.category-arrow');
                    if (arrow) {
                        if (isExpanded) {
                            arrow.setAttribute('data-expanded', 'true');
                            arrow.style.backgroundImage = 'url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' width=\'16\' height=\'16\' viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'%230F6CBD\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-linejoin=\'round\'><polyline points=\'6 15 12 9 18 15\'/></svg>")';
                        } else {
                            arrow.setAttribute('data-expanded', 'false');
                            arrow.style.backgroundImage = 'url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' width=\'16\' height=\'16\' viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'%230F6CBD\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-linejoin=\'round\'><polyline points=\'6 9 12 15 18 9\'/></svg>")';
                        }
                    }
                }

                categoryTree.forEach(category => renderCategory(category));
            }

            // 分类搜索功能
            const categorySearchInput = document.getElementById('categorySearchInput');
            categorySearchInput.addEventListener('input', function() {
                const searchTerm = this.value.toLowerCase();
                filterCategories(searchTerm);
            });

            function filterCategories(searchTerm) {
                const items = document.querySelectorAll('.category-item');
                let visibleCount = 0;

                items.forEach(item => {
                    const text = item.textContent.trim();
                    const isMatch = searchTerm === '' || text.toLowerCase().includes(searchTerm);

                    if (isMatch) {
                        item.style.display = 'flex';
                        visibleCount++;
                    } else {
                        item.style.display = 'none';
                    }
                });

                // 如果没有匹配项，显示提示信息
                if (visibleCount === 0 && searchTerm !== '') {
                    showCategorySearchTip();
                }
            }

            function showCategorySearchTip() {
                // 在分类列表末尾显示提示信息
                const categoryList = document.getElementById('categoryList');
                let tipElement = document.getElementById('category-search-tip');

                if (!tipElement) {
                    tipElement = document.createElement('div');
                    tipElement.id = 'category-search-tip';
                    tipElement.className = 'category-search-tip';
                    tipElement.style.cssText = `
                        padding: 12px;
                        text-align: center;
                        color: #999;
                        font-size: 12px;
                        background: #f5f5f5;
                        border-radius: 4px;
                        margin: 8px 0;
                    `;
                    categoryList.appendChild(tipElement);
                }

                tipElement.textContent = '未找到匹配的分类，请尝试其他关键词';
                tipElement.style.display = 'block';

                // 清空搜索框时隐藏提示
                setTimeout(() => {
                    if (categorySearchInput.value === '') {
                        tipElement.style.display = 'none';
                    }
                }, 100);
            }

            // 筛选药品
            function filterDrugs() {
                const searchTerm = document.getElementById('drugSearchInput').value.toLowerCase();
                const basicDrugFilter = document.getElementById('basicDrugFilter').value;
                const formFilter = document.getElementById('formFilter').value;

                let filteredDrugs = drugs.filter(drug => {
                    // 文本搜索
                    if (searchTerm && !drug.name.toLowerCase().includes(searchTerm) &&
                        !drug.code.toLowerCase().includes(searchTerm)) {
                        return false;
                    }

                    // 基本药物筛选
                    if (basicDrugFilter !== 'all') {
                        const isBasic = basicDrugFilter === 'yes';
                        if (drug.isBasic !== isBasic) {
                            return false;
                        }
                    }

                    // 剂型筛选
                    if (formFilter !== 'all' && drug.form !== formFilter) {
                        return false;
                    }

                    // 分类筛选
                    if (currentCategoryId && drug.categoryId !== currentCategoryId) {
                        // 检查是否是当前分类的子分类
                        if (!isChildCategory(currentCategoryId, drug.categoryId)) {
                            return false;
                        }
                    }

                    return true;
                });

                return filteredDrugs;
            }

            // 检查是否是子分类
            function isChildCategory(parentId, childId) {
                function findCategory(categories, targetId) {
                    for (const category of categories) {
                        if (category.id === targetId) return true;
                        if (category.children) {
                            if (findCategory(category.children, targetId)) return true;
                        }
                    }
                    return false;
                }
                return findCategory(categoryTree, childId);
            }

            // 渲染药品表格
            function renderDrugTable() {
                const filteredDrugs = filterDrugs();
                const drugTableBody = document.getElementById('drugTableBody');
                const totalDrugsSpan = document.getElementById('totalDrugs');

                // 更新总数
                totalDrugsSpan.textContent = filteredDrugs.length;

                // 计算分页
                totalPages = Math.ceil(filteredDrugs.length / pageSize);
                const startIndex = (currentPage - 1) * pageSize;
                const endIndex = startIndex + pageSize;
                const pageDrugs = filteredDrugs.slice(startIndex, endIndex);

                // 清空表格
                drugTableBody.innerHTML = '';

                // 渲染药品行
                pageDrugs.forEach(drug => {
                    const row = document.createElement('tr');
                    row.innerHTML = `
                        <td>${drug.name}</td>
                        <td>${drug.code}</td>
                        <td>${drug.spec}</td>
                        <td>${drug.form}</td>
                        <td>${drug.unit}</td>
                        <td>${drug.isBasic ? '是' : '否'}</td>
                        <td>${drug.usage || '-'}</td>
                        <td>${drug.dosage || '-'}</td>
                        <td>${drug.frequency || '-'}</td>
                        <td>${drug.indications || '-'}</td>
                        <td>${drug.contraindications || '-'}</td>
                        <td class="price-cell">
                            <span class="price-display" data-drug-id="${drug.id}" data-price="${drug.price}" ondblclick="editPrice(this)">${drug.price}元</span>
                        </td>
                        <td>
                            <div class="operations">
                                <a class="operation-link detail-drug" data-id="${drug.id}">详情</a>
                                <a class="operation-link delete-drug" data-id="${drug.id}">移除</a>
                            </div>
                        </td>
                    `;
                    drugTableBody.appendChild(row);
                });

                // 渲染分页控件
                renderPagination();
            }

            // 渲染分页控件
            function renderPagination() {
                const pageNumbersDiv = document.getElementById('pageNumbers');
                pageNumbersDiv.innerHTML = '';

                // 页码按钮
                const startPage = Math.max(1, currentPage - 2);
                const endPage = Math.min(totalPages, currentPage + 2);

                for (let i = startPage; i <= endPage; i++) {
                    const pageBtn = document.createElement('button');
                    pageBtn.textContent = i;
                    pageBtn.className = i === currentPage ? 'active' : '';
                    pageBtn.addEventListener('click', () => {
                        currentPage = i;
                        renderDrugTable();
                    });
                    pageNumbersDiv.appendChild(pageBtn);
                }
            }

            // 查询按钮事件
            document.getElementById('queryBtn').addEventListener('click', function() {
                currentPage = 1;
                renderDrugTable();
            });

            // 重置按钮事件
            document.getElementById('resetBtn').addEventListener('click', function() {
                document.getElementById('drugSearchInput').value = '';
                document.getElementById('basicDrugFilter').value = 'all';
                document.getElementById('formFilter').value = 'all';
                currentCategoryId = null;
                document.querySelectorAll('.category-item').forEach(i => i.classList.remove('active'));
                currentPage = 1;
                renderDrugTable();
            });

            // 添加药品按钮事件
            document.getElementById('addDrugBtn').addEventListener('click', function() {
                openAddDrugModal();
            });

            // 药品删除事件
            document.addEventListener('click', function(e) {
                if (e.target.classList.contains('delete-drug')) {
                    const drugId = parseInt(e.target.dataset.id);
                    if (confirm('确定要移除这个药品吗？')) {
                        drugs = drugs.filter(d => d.id !== drugId);
                        renderDrugTable();
                        alert('药品已移除');
                    }
                }
            });

            // 单价编辑功能
            function editPrice(element) {
                const drugId = parseInt(element.dataset.drugId);
                const currentPrice = element.dataset.price;

                // 创建输入框替换显示文本
                const input = document.createElement('input');
                input.type = 'number';
                input.className = 'price-input';
                input.value = currentPrice;
                input.step = '0.01';
                input.min = '0';

                // 保存原始文本用于取消时恢复
                const originalPrice = currentPrice;

                // 替换元素
                element.parentNode.replaceChild(input, element);

                // 聚焦并全选
                input.focus();
                input.select();

                // 保存功能
                function savePrice() {
                    const newPrice = parseFloat(input.value);
                    if (!isNaN(newPrice) && newPrice >= 0) {
                        // 更新药品数据
                        const drug = drugs.find(d => d.id === drugId);
                        if (drug) {
                            drug.price = newPrice.toFixed(2);
                        }

                        // 重新渲染表格
                        renderDrugTable();

                        // 可选：显示保存成功提示
                        showPriceEditTip('保存成功');
                    } else {
                        // 恢复原值
                        input.value = originalPrice;
                        showPriceEditTip('请输入有效的价格');
                    }
                }

                // 取消编辑功能
                function cancelEdit() {
                    renderDrugTable();
                }

                // 显示编辑提示
                function showPriceEditTip(message) {
                    // 创建提示元素
                    const tip = document.createElement('div');
                    tip.textContent = message;
                    tip.style.cssText = `
                        position: fixed;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%, -50%);
                        background: rgba(0, 0, 0, 0.8);
                        color: white;
                        padding: 8px 16px;
                        border-radius: 4px;
                        font-size: 12px;
                        z-index: 1000;
                        opacity: 0;
                        transition: opacity 0.3s;
                    `;

                    document.body.appendChild(tip);

                    // 显示提示
                    setTimeout(() => {
                        tip.style.opacity = '1';
                    }, 10);

                    // 隐藏提示
                    setTimeout(() => {
                        tip.style.opacity = '0';
                        setTimeout(() => {
                            document.body.removeChild(tip);
                        }, 300);
                    }, 1500);
                }

                // 绑定事件
                input.addEventListener('blur', savePrice);
                input.addEventListener('keydown', function(e) {
                    if (e.key === 'Enter') {
                        e.preventDefault();
                        savePrice();
                    } else if (e.key === 'Escape') {
                        e.preventDefault();
                        cancelEdit();
                    }
                });

                // 点击其他地方保存
                document.addEventListener('click', function handleClick(e) {
                    if (!input.contains(e.target) && e.target !== input) {
                        savePrice();
                        document.removeEventListener('click', handleClick);
                    }
                });
            }

            // 药品详情事件
            document.addEventListener('click', function(e) {
                if (e.target.classList.contains('detail-drug')) {
                    const drugId = parseInt(e.target.dataset.id);
                    const drug = drugs.find(d => d.id === drugId);
                    if (drug) {
                        openDrugDetailModal(drug);
                    }
                }
            });

            // 每页显示数量选择
            document.getElementById('pageSizeSelector').addEventListener('change', function() {
                pageSize = parseInt(this.value);
                currentPage = 1;
                renderDrugTable();
            });

            // 药品详情弹窗功能
            function openDrugDetailModal(drug) {
                const modal = document.getElementById('drugDetailModal');
                const body = document.getElementById('drugDetailBody');

                // 清空内容
                body.innerHTML = '';

                // 药品基本信息
                const basicInfoSection = createDrugDetailSection('药品基本信息');
                const basicInfoContent = basicInfoSection.querySelector('.drug-detail-section-content');
                basicInfoContent.classList.add('detail-grid-5');

                const basicInfoFields = [
                    { label: '药品名称', value: drug.name },
                    { label: '药品编码', value: drug.code },
                    { label: '药品分类', value: getCategoryName(drug.categoryId) },
                    { label: '基本药物', value: drug.isBasic ? '是' : '否' },
                    { label: '药品状态', value: '启用' }
                ];

                basicInfoFields.forEach(field => {
                    const fieldDiv = document.createElement('div');
                    fieldDiv.className = 'drug-detail-field';
                    fieldDiv.innerHTML = `
                        <div class="drug-detail-label">${field.label}</div>
                        <div class="drug-detail-value">${field.value}</div>
                    `;
                    basicInfoContent.appendChild(fieldDiv);
                });

                body.appendChild(basicInfoSection);

                // 药品规格与用法用量
                const specSection = createDrugDetailSection('药品规格与用法用量');
                const specContent = specSection.querySelector('.drug-detail-section-content');
                specContent.classList.add('detail-grid-6');

                const specFields = [
                    { label: '规格', value: drug.spec },
                    { label: '剂型', value: drug.form },
                    { label: '单位', value: drug.unit },
                    { label: '常用用法', value: drug.usage || '-' },
                    { label: '常用频次', value: drug.frequency || '-' },
                    { label: '常用用量', value: drug.dosage || '-' }
                ];

                specFields.forEach(field => {
                    const fieldDiv = document.createElement('div');
                    fieldDiv.className = 'drug-detail-field';
                    fieldDiv.innerHTML = `
                        <div class="drug-detail-label">${field.label}</div>
                        <div class="drug-detail-value">${field.value}</div>
                    `;
                    specContent.appendChild(fieldDiv);
                });

                body.appendChild(specSection);

                // 适应症与禁忌症
                const indicationsSection = createDrugDetailSection('适应症与禁忌症');
                const indicationsContent = indicationsSection.querySelector('.drug-detail-section-content');
                indicationsContent.classList.add('detail-grid-2');

                const leftCard = document.createElement('div');
                leftCard.className = 'drug-detail-field';
                leftCard.innerHTML = `
                    <div class="drug-detail-label">适应症</div>
                    <div class="detail-card">${drug.indications || '暂无信息'}</div>
                `;
                indicationsContent.appendChild(leftCard);

                const rightCard = document.createElement('div');
                rightCard.className = 'drug-detail-field';
                rightCard.innerHTML = `
                    <div class="drug-detail-label">禁忌症</div>
                    <div class="detail-card">${drug.contraindications || '暂无信息'}</div>
                `;
                indicationsContent.appendChild(rightCard);

                body.appendChild(indicationsSection);

                // 药品图片（暂时使用占位符）
                const imagesSection = createDrugDetailSection('药品图片');
                const imagesContent = imagesSection.querySelector('.drug-detail-section-content');

                const imagesDiv = document.createElement('div');
                imagesDiv.className = 'drug-images';

                // 添加示例图片占位符
                for (let i = 0; i < 4; i++) {
                    const imageItem = document.createElement('div');
                    imageItem.className = 'drug-image-item';
                    imageItem.innerHTML = `
                        <div class="drug-image-placeholder">
                            <img src="https://via.placeholder.com/120x120?text=药品图片${i + 1}" alt="药品图片${i + 1}">
                        </div>
                    `;
                    imagesDiv.appendChild(imageItem);
                }

                imagesContent.appendChild(imagesDiv);

                const tipDiv = document.createElement('div');
                tipDiv.className = 'drug-image-tip';
                tipDiv.textContent = '点击图片可查看大图';
                imagesContent.appendChild(tipDiv);

                body.appendChild(imagesSection);

                // 显示弹窗
                modal.style.display = 'flex';
                setTimeout(() => {
                    modal.classList.add('show');
                }, 10);
            }

            function createDrugDetailSection(title) {
                const section = document.createElement('div');
                section.className = 'drug-detail-section';

                const header = document.createElement('div');
                header.className = 'drug-detail-section-header';

                const titleElement = document.createElement('h4');
                titleElement.className = 'drug-detail-section-title';
                titleElement.textContent = title;

                header.appendChild(titleElement);
                section.appendChild(header);

                const content = document.createElement('div');
                content.className = 'drug-detail-section-content';
                section.appendChild(content);

                return section;
            }

            function getCategoryName(categoryId) {
                function findCategory(categories, id) {
                    for (const category of categories) {
                        if (category.id === id) return category.name;
                        if (category.children) {
                            const found = findCategory(category.children, id);
                            if (found) return category.name + ' > ' + found;
                        }
                    }
                    return '未知分类';
                }
                return findCategory(categoryTree, categoryId);
            }

            // 关闭药品详情弹窗
            function closeDrugDetailModal() {
                const modal = document.getElementById('drugDetailModal');
                modal.classList.remove('show');
                setTimeout(() => {
                    modal.style.display = 'none';
                }, 300);
            }

            // 点击遮罩层关闭弹窗
            document.getElementById('drugDetailModal').addEventListener('click', function(e) {
                if (e.target === this) {
                    closeDrugDetailModal();
                }
            });

            // 添加药品弹窗相关变量
            let addDrugCurrentCategoryId = null;
            let addDrugCurrentPage = 1;
            let addDrugPageSize = 10;
            let selectedDrugs = [];
            let addDrugTotalPages = 0;
            let addDrugSearchTerm = '';

            // 打开添加药品弹窗
            function openAddDrugModal() {
                const modal = document.getElementById('addDrugModal');
                
                // 重置状态
                selectedDrugs = [];
                addDrugCurrentCategoryId = null;
                addDrugCurrentPage = 1;
                addDrugSearchTerm = '';

                // 初始化添加药品弹窗的分类树
                initAddDrugCategoryTree();

                // 重置筛选条件
                document.getElementById('addDrugBasicFilter').value = 'all';
                document.getElementById('addDrugFormFilter').value = 'all';
                
                // 重置搜索框
                if (document.getElementById('addDrugSystemSearch')) {
                    document.getElementById('addDrugSystemSearch').value = '';
                }
                if (document.getElementById('addDrugCategorySearch')) {
                    document.getElementById('addDrugCategorySearch').value = '';
                }

                // 渲染药品列表
                renderAddDrugTable();

                // 更新选中计数
                updateSelectedCount();

                // 显示弹窗
                modal.style.display = 'flex';
                setTimeout(() => {
                    modal.classList.add('show');
                }, 10);
            }

            // 初始化添加药品弹窗的分类树
            function initAddDrugCategoryTree() {
                const categoryTreeContainer = document.getElementById('addDrugCategoryTree');
                categoryTreeContainer.innerHTML = '';

                function renderAddDrugCategory(category, level = 0) {
                    const item = document.createElement('div');
                    item.className = `category-item${addDrugCurrentCategoryId === category.id ? ' active' : ''}`;
                    item.dataset.id = category.id;
                    item.dataset.level = level;

                    const indent = '&nbsp;'.repeat(level * 4);
                    const hasChildren = category.children && category.children.length > 0;

                    const arrow = hasChildren ?
                        '<span class="category-arrow" data-expanded="true"></span>' : '<span class="category-spacer"></span>';

                    item.innerHTML = `
                        ${indent}${arrow}
                        <span>${category.name}</span>
                    `;

                    item.addEventListener('click', function(e) {
                        const isArrowClick = e.target.classList.contains('category-arrow') ||
                                            (e.target.parentElement && e.target.parentElement.querySelector('.category-arrow') === e.target);

                        if (isArrowClick && hasChildren) {
                            toggleAddDrugCategory(category.id);
                            e.stopPropagation();
                        } else {
                            document.querySelectorAll('#addDrugCategoryTree .category-item').forEach(i => i.classList.remove('active'));
                            this.classList.add('active');
                            addDrugCurrentCategoryId = category.id;
                            addDrugCurrentPage = 1;
                            renderAddDrugTable();
                        }
                    });

                    categoryTreeContainer.appendChild(item);

                    if (category.children && category.children.length > 0) {
                        category.children.forEach(child => {
                            const childItem = renderAddDrugCategory(child, level + 1);
                            childItem.dataset.parentId = category.id;
                        });
                    }

                    return item;
                }

                function toggleAddDrugCategory(categoryId) {
                    const items = document.querySelectorAll('#addDrugCategoryTree .category-item');
                    const parentItem = Array.from(items).find(item => parseInt(item.dataset.id) === categoryId);

                    if (!parentItem) return;

                    const arrow = parentItem.querySelector('.category-arrow');
                    if (!arrow) return;

                    const isCurrentlyExpanded = arrow.getAttribute('data-expanded') === 'true';
                    const newExpandedState = !isCurrentlyExpanded;

                    updateAddDrugArrowDirection(parentItem, newExpandedState);

                    const childItems = Array.from(items).filter(item =>
                        item.dataset.parentId && parseInt(item.dataset.parentId) === categoryId
                    );

                    childItems.forEach(item => {
                        item.style.display = newExpandedState ? 'flex' : 'none';

                        if (!newExpandedState) {
                            const childArrow = item.querySelector('.category-arrow');
                            if (childArrow && childArrow.getAttribute('data-expanded') === 'true') {
                                toggleAddDrugCategory(parseInt(item.dataset.id));
                            }
                        }
                    });
                }

                function updateAddDrugArrowDirection(item, isExpanded) {
                    const arrow = item.querySelector('.category-arrow');
                    if (arrow) {
                        if (isExpanded) {
                            arrow.setAttribute('data-expanded', 'true');
                            arrow.style.backgroundImage = 'url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' width=\'16\' height=\'16\' viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'%230F6CBD\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-linejoin=\'round\'><polyline points=\'6 15 12 9 18 15\'/></svg>")';
                        } else {
                            arrow.setAttribute('data-expanded', 'false');
                            arrow.style.backgroundImage = 'url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' width=\'16\' height=\'16\' viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'%230F6CBD\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-linejoin=\'round\'><polyline points=\'6 9 12 15 18 9\'/></svg>")';
                        }
                    }
                }

                categoryTree.forEach(category => renderAddDrugCategory(category));
            }

            // 添加药品弹窗搜索功能
            document.getElementById('addDrugCategorySearch').addEventListener('input', function() {
                const searchTerm = this.value.toLowerCase();
                filterAddDrugCategories(searchTerm);
            });

            function filterAddDrugCategories(searchTerm) {
                const items = document.querySelectorAll('#addDrugCategoryTree .category-item');
                let visibleCount = 0;

                items.forEach(item => {
                    const text = item.textContent.trim();
                    const isMatch = searchTerm === '' || text.toLowerCase().includes(searchTerm);

                    if (isMatch) {
                        item.style.display = 'flex';
                        visibleCount++;
                    } else {
                        item.style.display = 'none';
                    }
                });

                if (visibleCount === 0 && searchTerm !== '') {
                    showAddDrugCategorySearchTip();
                }
            }

            function showAddDrugCategorySearchTip() {
                const categoryTreeContainer = document.getElementById('addDrugCategoryTree');
                let tipElement = document.getElementById('add-drug-category-search-tip');

                if (!tipElement) {
                    tipElement = document.createElement('div');
                    tipElement.id = 'add-drug-category-search-tip';
                    tipElement.className = 'category-search-tip';
                    tipElement.style.cssText = `
                        padding: 12px;
                        text-align: center;
                        color: #999;
                        font-size: 12px;
                        background: #f5f5f5;
                        border-radius: 4px;
                        margin: 8px 0;
                    `;
                    categoryTreeContainer.appendChild(tipElement);
                }

                tipElement.textContent = '未找到匹配的分类，请尝试其他关键词';
                tipElement.style.display = 'block';

                setTimeout(() => {
                    if (document.getElementById('addDrugCategorySearch').value === '') {
                        tipElement.style.display = 'none';
                    }
                }, 100);
            }

            // 渲染添加药品弹窗的药品列表
            function renderAddDrugTable() {
                const filteredDrugs = filterAddDrugDrugs();
                const tableBody = document.getElementById('addDrugTableBody');
                const totalSpan = document.getElementById('addDrugTotal');

                totalSpan.textContent = filteredDrugs.length;

                addDrugTotalPages = Math.ceil(filteredDrugs.length / addDrugPageSize);
                const startIndex = (addDrugCurrentPage - 1) * addDrugPageSize;
                const endIndex = startIndex + addDrugPageSize;
                const pageDrugs = filteredDrugs.slice(startIndex, endIndex);

                tableBody.innerHTML = '';

                pageDrugs.forEach(drug => {
                    const isSelected = selectedDrugs.some(selected => selected.id === drug.id);
                    const row = document.createElement('tr');
                    row.innerHTML = `
                        <td><input type="checkbox" class="add-drug-checkbox" data-drug-id="${drug.id}" ${isSelected ? 'checked' : ''}></td>
                        <td>${drug.name}</td>
                        <td>${drug.code}</td>
                        <td>${drug.spec}</td>
                        <td>${drug.form}</td>
                        <td>${drug.unit}</td>
                        <td>${drug.isBasic ? '是' : '否'}</td>
                        <td>${drug.usage || '-'}</td>
                        <td>${drug.dosage || '-'}</td>
                        <td>${drug.frequency || '-'}</td>
                        <td>${drug.indications || '-'}</td>
                        <td>${drug.contraindications || '-'}</td>
                    `;
                    tableBody.appendChild(row);
                });

                renderAddDrugPagination();
            }

            // 筛选添加药品弹窗的药品
            function filterAddDrugDrugs() {
                const basicFilter = document.getElementById('addDrugBasicFilter').value;
                const formFilter = document.getElementById('addDrugFormFilter').value;
                const searchTerm = addDrugSearchTerm.toLowerCase();

                let filteredDrugs = systemDrugs.filter(drug => {
                    // 搜索筛选
                    if (searchTerm && !drug.name.toLowerCase().includes(searchTerm) &&
                        !drug.code.toLowerCase().includes(searchTerm) &&
                        !(drug.indications && drug.indications.toLowerCase().includes(searchTerm))) {
                        return false;
                    }

                    // 基本药物筛选
                    if (basicFilter !== 'all') {
                        const isBasic = basicFilter === 'yes';
                        if (drug.isBasic !== isBasic) {
                            return false;
                        }
                    }

                    // 剂型筛选
                    if (formFilter !== 'all' && drug.form !== formFilter) {
                        return false;
                    }

                    // 分类筛选
                    if (addDrugCurrentCategoryId && drug.categoryId !== addDrugCurrentCategoryId) {
                        if (!isChildCategory(addDrugCurrentCategoryId, drug.categoryId)) {
                            return false;
                        }
                    }

                    return true;
                });

                return filteredDrugs;
            }

            // 渲染添加药品弹窗的分页
            function renderAddDrugPagination() {
                const pageNumbersDiv = document.getElementById('addDrugPageNumbers');
                pageNumbersDiv.innerHTML = '';

                const startPage = Math.max(1, addDrugCurrentPage - 2);
                const endPage = Math.min(addDrugTotalPages, addDrugCurrentPage + 2);

                for (let i = startPage; i <= endPage; i++) {
                    const pageBtn = document.createElement('button');
                    pageBtn.textContent = i;
                    pageBtn.className = `add-drug-pagination-btn ${i === addDrugCurrentPage ? 'active' : ''}`;
                    pageBtn.addEventListener('click', () => {
                        addDrugCurrentPage = i;
                        renderAddDrugTable();
                    });
                    pageNumbersDiv.appendChild(pageBtn);
                }
            }

            // 更新选中药品计数
            function updateSelectedCount() {
                const count = selectedDrugs.length;
                const headerCountEl = document.getElementById('selectedCount');
                const confirmBtn = document.getElementById('confirmAddDrugBtn');
                if (headerCountEl) headerCountEl.textContent = count;
                if (confirmBtn) confirmBtn.disabled = count === 0;
            }

            // 添加药品弹窗的复选框事件
            document.addEventListener('change', function(e) {
                if (e.target.classList.contains('add-drug-checkbox')) {
                    const drugId = parseInt(e.target.dataset.drugId);
                    const drug = systemDrugs.find(d => d.id === drugId);

                    if (e.target.checked) {
                        if (!selectedDrugs.some(selected => selected.id === drugId)) {
                            selectedDrugs.push(drug);
                        }
                    } else {
                        selectedDrugs = selectedDrugs.filter(selected => selected.id !== drugId);
                    }

                    updateSelectedCount();
                }
            });

            // 绑定添加药品弹窗的筛选事件
            const addDrugBasicFilterEl = document.getElementById('addDrugBasicFilter');
            if (addDrugBasicFilterEl) addDrugBasicFilterEl.addEventListener('change', function() {
                addDrugCurrentPage = 1;
                renderAddDrugTable();
            });

            const addDrugFormFilterEl = document.getElementById('addDrugFormFilter');
            if (addDrugFormFilterEl) addDrugFormFilterEl.addEventListener('change', function() {
                addDrugCurrentPage = 1;
                renderAddDrugTable();
            });

            // 关闭添加药品弹窗
            function closeAddDrugModal() {
                const modal = document.getElementById('addDrugModal');
                modal.classList.remove('show');
                setTimeout(() => {
                    modal.style.display = 'none';
                }, 300);
            }

            // 确认添加药品
            function confirmAddDrugs() {
                if (selectedDrugs.length === 0) {
                    alert('请选择要添加的药品');
                    return;
                }

                // 将选中的药品添加到个人药品库
                selectedDrugs.forEach(drug => {
                    const newDrug = {
                        id: Math.max(...drugs.map(d => d.id)) + 1,
                        name: drug.name,
                        code: drug.code,
                        spec: drug.spec,
                        form: drug.form,
                        unit: drug.unit,
                        isBasic: drug.isBasic,
                        usage: drug.usage,
                        dosage: drug.dosage,
                        frequency: drug.frequency,
                        indications: drug.indications,
                        contraindications: drug.contraindications,
                        price: '0.00', // 新添加的药品默认价格为0
                        categoryId: drug.categoryId
                    };

                    // 检查是否已存在相同编码的药品
                    const existingDrug = drugs.find(d => d.code === drug.code);
                    if (!existingDrug) {
                        drugs.push(newDrug);
                    }
                });

                closeAddDrugModal();
                renderDrugTable(); // 刷新个人药品列表

                alert(`成功添加 ${selectedDrugs.length} 个药品到个人药品库`);
                selectedDrugs = [];
            }

            // 绑定添加药品弹窗事件
            document.getElementById('addDrugBtn').addEventListener('click', openAddDrugModal);
            document.getElementById('closeAddDrugModal').addEventListener('click', closeAddDrugModal);
            document.getElementById('cancelAddDrugBtn').addEventListener('click', closeAddDrugModal);
            document.getElementById('confirmAddDrugBtn').addEventListener('click', confirmAddDrugs);

            // 系统药品库搜索功能
            document.addEventListener('DOMContentLoaded', function() {
                if (document.getElementById('addDrugSystemSearch')) {
                    document.getElementById('addDrugSystemSearch').addEventListener('input', function() {
                        addDrugSearchTerm = this.value;
                        addDrugCurrentPage = 1; // 重置为第一页
                        renderAddDrugTable();
                    });
                }
            });

            // 绑定查询和重置按钮事件
            document.addEventListener('DOMContentLoaded', function() {
                if (document.getElementById('addDrugQueryBtn')) {
                    document.getElementById('addDrugQueryBtn').addEventListener('click', function() {
                        addDrugCurrentPage = 1; // 重置为第一页
                        renderAddDrugTable();
                    });
                }
                
                if (document.getElementById('addDrugResetBtn')) {
                    document.getElementById('addDrugResetBtn').addEventListener('click', function() {
                        // 重置搜索和筛选条件
                        addDrugSearchTerm = '';
                        if (document.getElementById('addDrugSystemSearch')) {
                            document.getElementById('addDrugSystemSearch').value = '';
                        }
                        document.getElementById('addDrugBasicFilter').value = 'all';
                        document.getElementById('addDrugFormFilter').value = 'all';
                        
                        addDrugCurrentPage = 1; // 重置为第一页
                        renderAddDrugTable();
                    });
                }
                
                // 每页显示数量选择
                if (document.getElementById('addDrugPageSizeSelector')) {
                    document.getElementById('addDrugPageSizeSelector').addEventListener('change', function() {
                        addDrugPageSize = parseInt(this.value);
                        addDrugCurrentPage = 1; // 重置为第一页
                        renderAddDrugTable();
                    });
                }
            });

            // 点击遮罩层关闭弹窗
            document.getElementById('addDrugModal').addEventListener('click', function(e) {
                if (e.target === this) {
                    closeAddDrugModal();
                }
            });

            // 初始化页面
            initCategoryTree();
            renderDrugTable();

            // 标题栏 "X" 关闭按钮
            const closeDetailBtn = document.getElementById('closeDrugDetailModal');
            if (closeDetailBtn) closeDetailBtn.addEventListener('click', closeDrugDetailModal);
        });
    </script>
</body>
</html>
